<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
	<link rel="stylesheet" href="css/css1.css" />
	</head>
	<body>
		<div>
			<div>用户注册</div>
			<form action="https://www.baidu.com">
				<label>登录账号：</label><input style="" id="i" type="text" name="user"/><br />
				<label for="i1">密码：</label><input id="i1" type="text" name="user"/><br />
				<label for="i2">确认密码：</label><input id="i2" type="text" name="user"/><label id='la'></label><br />
				<label for="i3">性别：</label><select id="i3"><option>男</option><option>女</option></select><br />
				<label for="i4">电子邮箱：</label><input id="i4" type="email" name="user"/><br />
				
				<p id="pp" style="color: red;"></p>
				<input  type="submit" value="提交" onclick="return yanzheng()"/>
			</form>
		</div>
		<script type="text/javascript" src="js/jquery-1.7.2.min.js" ></script>
		<script>
			function yanzheng(){
				var flag = false;//返回值标志
				//获取input标签的value
				var i1 = document.getElementById("i1").value;
				var i2 = document.getElementById("i2").value;
				var i3 = document.getElementById("i3").value;
				var i4 = document.getElementById("i4").value;
				var pp = document.getElementById("pp");
				if(i1.length != 0 && i2.length != 0 && i3.length != 0 && i4.length != 0){
					if(i1.length == i2.length && i1 == i2){
						flag = true;
					}else{
						pp.innerHTML = "两次密码不一样";
						flag = false;
					}
				}else{
					pp.innerHTML = "表单不能为空";
					flag = false;
				}
				return flag;
			}
			$("#i").focus(function(){
				console.log("iii");
				//清空  错误提示
				$("#pp").text("");
				$("#la").text("");
			});
			//当第二次密码输入完成后   判断两次密码是否一致
			$('#i2').blur(function(){
				var i2 = $(this).val();
				var i1 = $('#i1').val();
				if(i1 != i2){
//					alert("两次密码不一致");
					//追加标签background: black
					$('#la').css({color: "red" ,background:"black"});
					$('#la').text("两次密码不一致");
				}
			})
		</script>
	</body>
</html>

